<template>
  <div>
      <el-dialog   :modelValue="dialogVisible"  title="3000开出命令选择"  width="50%"
                  :close-on-click-modal="false" :close-on-press-escape="false"
                  :show-close="false" >

          <div style="display: flex; align-items: center; margin-bottom: 15px;">
            <span style="margin-right: 10px;">项目选择：</span>
            <el-select v-model="currentPrefix" placeholder="请选择项目" style="flex: 1" @change="handleProjectChange">
              <el-option
                v-for="item in projects"
                :key="item.prefix"
                :label="item.descr"
                :value="item.prefix">
              </el-option>
            </el-select>

          </div>

          <el-table :data="ctlCmds" highlight-current-row 
          @current-change="handleCurrentChange"
          style="max-height: 60vh; overflow-y: auto;">
            <el-table-column prop="stationid" label="站点ID" width="120"/>
            <el-table-column prop="ctlid" label="命令ID" width="120"/>
            <el-table-column prop="ctldescr" label="命令描述" />
            <el-table-column prop="bz" label="命令备注" />
          </el-table>

        <template #footer>
          <div style="display: flex; flex-direction: row-reverse; ">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleOk"  style="margin: 0 10px 0 10px;" >返回开出号</el-button>
            <el-button type="primary" @click="handleOkWithPrefix"  style="margin: 0 10px 0 10px;" >返回带项目标识</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>

import {ElMessage} from "element-plus";
import request from '@/utils/drawutils/request'
import axios from 'axios';


export default {
  name: "DlgSelectCmd",
  props:{ dialogVisible: Boolean },
  components:{},
  emits:[ "resSelect" ],

  mounted() {

  },
  computed:{

  },
  data(){
    return{
      ctlCmds: [],    
      projects: [],         // 所有的项目
      currentPrefix: null, // 当前选中的项目
      currentCmd: null, // 当前选中的命令

    }
  },
  watch: {

  },
  methods:{
    async init(  ){
      let res = await request.post( "/drwproject/getallprojects" )
      if( res.code === '1' ){
          this.projects = res.data
          if(this.projects.length > 0) {
            this.currentPrefix = this.projects[0].prefix
            this.getCmdCtl(this.projects[0].prefix)
          }
      }        
      console.log( "projects: ", this.projects )
    },  

    async getCmdCtl( prefix ){
      let res = await request.post( "/hg3000/getctlcmd?projectPrefix="+prefix )
      if( res.code === '1' ){
          this.ctlCmds = res.data
      }
      else{
        this.ctlCmds = []
        ElMessage.error( res.msg )
      }        
      console.log( "ctlCmds: ", this.ctlCmds )
    },  

    handleOk(  ){
      if(this.currentCmd) {
        let cmd = this.currentCmd.stationid + "  " +  this.currentCmd.ctlid
        this.$emit("resSelect", 1, cmd)
      } else {
        ElMessage.warning('请先选择一个命令提示')
      }
    },
    handleOkWithPrefix(  ){
      if(this.currentCmd) {
        let cmd = this.currentCmd.stationid + "  " +  this.currentCmd.ctlid + " in " + this.currentPrefix
        this.$emit("resSelect", 1, cmd)
      } else {
        ElMessage.warning('请先选择一个命令提示')
      }
    },

    handleCancel(){
      this.$emit("resSelect", 0)
    },

    handleCurrentChange(val) {
      this.currentCmd = val;
      console.log('当前选中的命令:', this.currentCmd);
    },

// 在methods中添加handleProjectChange方法
    handleProjectChange(val) {
      if (val ) {
        this.getCmdCtl(val);
      }
    },
  },  // end of methods

}

</script>

<style  lang="less" scoped >
::v-deep(.el-table) {
  font-size: 14px; /* 设置表格字体大小 */
    /* 奇数行背景色 */
    .el-table__row:nth-child(odd) {
    background-color: #a8a8a8; /* 浅灰色 */
  }
  
  /* 偶数行背景色 */
  .el-table__row:nth-child(even) {
    background-color: #ffffff; /* 白色 */
  }
}

::v-deep(.el-table__body tr.current-row > td) {
  background-color: rgb(0, 148, 68) !important;
}

::v-deep( tbody tr:hover > td ){
  background-color: transparent !important;
}

</style>